<ion-header>
  <ion-navbar>
    <ion-title>Custom Pagination</ion-title>
  </ion-navbar>
</ion-header>
<ion-content text-center>
  <h3>Pagination numbers</h3>
  <ion-slides #sliderOne pager (ionDidChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>


  <h3>Pagination numbers 2</h3>
  <ion-slides #sliderTwo pager (ionDidChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>


  <h3>Pagination icons</h3>
  <ion-slides #sliderThree pager (ionDidChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>
</ion-content>

